<style lang="less">
@import "../assets/css/bigData.less";
</style>
<template>
  <div class="page-bigdata" :style="{ height: mainH + 'px' }">
    <div ref="echart" class="echart-map"></div>
    <div class="bigdata-rank">
      <el-form :inline="true" class="filter-blk flex-1">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          @change="dateChange"
        >
        </el-date-picker>
      </el-form>
      <div class="tab-nav mt-20">
        <div v-for="(item, index) in types" :key="index">
          <a
            href="javascript:;"
            :class="{ active: activeType == item.type }"
            @click="changeNav(item, index)"
            >{{ item.name }}</a
          >
        </div>
      </div>

      <iot-blk title="险情排行">
        <div class="tab-nav" v-if="activeType == 'area'">
          <div v-for="(item, index) in areaType" :key="index">
            <a
              href="javascript:;"
              :class="{ active: activeArea == item.type }"
              @click="changeArea(item, index)"
              >{{ item.name }}</a
            >
          </div>
        </div>
        <ul class="rank-list">
          <li class="flex" v-for="(item, index) in rankList" :key="index">
            <p class="flex-1">{{ item.name }}</p>
            <p class="count">{{ item.count }}</p>
          </li>
        </ul>
      </iot-blk>
    </div>
    <!-- <el-row class="bigdata-main" :gutter="20">
            <el-col :span="6">
                
            </el-col>
            <el-col :span="18">
                <div ref="echart" class="echart-map" :style="{height: mapH+'px'}"></div>
            </el-col>
        </el-row> -->
    <ul class="data-stat flex">
      <li v-for="(item, index) in statList" :key="index">
        {{ item.deviceClassifyName }}<i class="num">{{ item.num }}</i>
      </li>
    </ul>
  </div>
</template>
<script>
import Handle from "@/components/HandleAlarm.vue";
import { mapState } from "vuex";
import echarts from "echarts";
require("echarts-extension-amap");
let socket = null;
let clearTimer = null;
const toData = { name: "科金大厦", coord: [117.113983, 36.662687] };
export default {
  name: "Notice",
  components: {
    Handle,
  },
  props: {
    winH: {
      type: Number,
      default: 500,
    },
  },
  // <!-- 1 电气火灾 2 消防用水 3 烟感 4 可燃气体 5 火灾自动联网 6 消防可视化 -->
  data() {
    return {
      dateRange: [],
      mapChart: null,
      fromData: [],
      series: [],
      activeType: "place",
      types: [
        {
          type: "place",
          name: "场所",
        },
        {
          type: "area",
          name: "区域",
        },
        {
          type: "type",
          name: "类型",
        },
      ],
      areaType: [
        {
          type: "province",
          name: "省份",
        },
        {
          type: "city",
          name: "城市",
        },
        {
          type: "region",
          name: "区县",
        },
        {
          type: "street",
          name: "街道",
        },
      ],
      activeArea: "province",
      rankList: [],
      statList: [],
    };
  },
  computed: {
    ...mapState(["siteInfos"]),
    mainH() {
      return this.winH - 180;
    },
    mapH() {
      return this.winH - 240;
    },
    startdate() {
      return this.dateRange[0];
    },
    enddate() {
      return this.dateRange[1];
    },
  },
  watch: {},
  methods: {
    dateChange(val) {
      this.getRank();
    },
    changeNav(item) {
      this.activeType = item.type;
      this.getRank();
    },
    changeArea(item) {
      this.activeArea = item.type;
      this.getRank();
    },
    getData() {
      this.$get("/fireFightingIOT/fireFightingIOT/webBigDataForClassify").then(
        (res) => {
          this.statList = res.data;
        }
      );
    },
    getRank() {
      let flag = this.activeType;
      if (flag == "area") {
        flag = this.activeArea;
      }
      this.$get("/fireFightingIOT/fireFightingIOT/webBigData", {
        flag: flag,
        starttime: this.startdate,
        endtime: this.enddate,
      }).then((res) => {
        this.rankList = res.data;
      });
    },
    isPosExist(pointData) {
      let existData = this.fromData.filter((item) => {
        return item.coord[0] == pointData.lon && item.coord[1] == pointData.lat;
      });
      return existData.length > 0;
    },
    openSocket() {
      socket = io(this.config.socketUrl, { path: "/socket.io" });
      let uid = "1111";
      socket.on("connect", function() {
        console.log("connect");
      });
      socket.on("disconnect", function() {
        console.log("disconnect");
      });
      socket.on("new_msg", (msg) => {
        this.getData();
        let dataArr = msg.split(",");
        let pointData = {};
        dataArr.forEach((item) => {
          let temp = item.split("=");
          pointData[temp[0]] = temp[1];
        });
        if (pointData.dataType == 1) {
          this.getRank();
        }
        if (pointData.lon && pointData.lat) {
          if (this.isPosExist(pointData)) return;
          this.fromData.push({
            coord: [pointData.lon, pointData.lat],
            dataType: pointData.dataType,
          });
          this.setMapData(this.fromData);
        }
      });
      socket.open();
    },
    clearFromData() {
      let len = this.series.length;
      if (len <= 1) {
        return;
      }
      let temp = [this.series[0]];
      let keepLen = len - Math.floor((len - 1) / 2);
      for (let i = keepLen; i < len; i++) {
        temp.push(this.series[i]);
      }
      this.series = temp;
      // console.log(temp.length)
      // let delStartIndex = delLen-1
      // this.series.splice(delStartIndex,delLen)
      this.mapChart.setOption({
        series: this.series,
      });
    },
    setMapData(fromData) {
      fromData.forEach((item) => {
        let color = item.dataType == 2 ? "#00ffff" : "#a6c84c";
        let line1 = {
          name: "",
          coordinateSystem: "amap",
          type: "lines",
          zlevel: 1,
          effect: {
            show: true,
            period: 6,
            trailLength: 0.7,
            color: "#fff",
            symbolSize: 3,
          },
          lineStyle: {
            normal: {
              color: color,
              width: 0,
              curveness: 0.2,
            },
          },
          data: [
            {
              fromName: "",
              toName: toData.name,
              coords: [item.coord, toData.coord],
              value: 95,
            },
          ],
        };
        let line2 = {
          name: "",
          coordinateSystem: "amap",
          type: "lines",
          zlevel: 2,
          symbol: ["none", "arrow"],
          symbolSize: 10,
          lineStyle: {
            normal: {
              color: color,
              width: 1,
              opacity: 0.6,
              curveness: 0.2,
            },
          },
          data: [
            {
              fromName: "",
              toName: toData.name,
              coords: [item.coord, toData.coord],
              value: 95,
            },
          ],
        };
        this.series.push(line1);
        this.series.push(line2);
      });
      this.mapChart.setOption({
        series: this.series,
      });
    },
    initMap() {
      var mapChart = echarts.init(this.$refs.echart);
      mapChart.setOption({
        title: {
          text: "",
          subtext: "",
          left: "center",
          textStyle: {
            color: "#fff",
          },
        },
        amap: {
          maxPitch: 60,
          pitch: 15, //45 俯仰角
          viewMode: "3D",
          zoom: 8,
          expandZoomRange: true,
          zooms: [3, 20],
          mapStyle: "amap://styles/darkblue", //地图主题
          center: [117.113983, 36.662687], //中心点
          rotation: 0, //顺时针旋转角度
          resizeEnable: true,
        },
        animation: false,
        series: [],
      });
      this.series.push({
        name: "",
        type: "effectScatter",
        coordinateSystem: "amap",
        zlevel: 2,
        rippleEffect: {
          brushType: "stroke",
        },
        label: {
          normal: {
            show: true,
            position: "bottom",
            formatter: "{b}",
          },
        },
        itemStyle: {
          normal: {
            color: "#00ffff",
          },
        },
        data: [
          {
            name: toData.name,
            value: toData.coord,
          },
        ],
      });
      // this.series =  series
      mapChart.setOption({
        series: this.series,
      });

      var amap = mapChart
        .getModel()
        .getComponent("amap")
        .getAMap();

      AMap.plugin(["AMap.ControlBar"], function() {
        var bar = new AMap.ControlBar({
          position: { top: "10px", right: "10px" },
        });
        amap.addControl(bar);
      });

      AMap.plugin(["AMap.ToolBar"], function() {
        amap.addControl(new AMap.ToolBar());
      });

      amap.on("zoomend", function() {
        // console.log('当前缩放级别：' + amap.getZoom());
        // console.log('俯视视角' + amap.getPitch());
        // console.log('俯视视角' + amap.getPitch());
      });
      this.mapChart = mapChart;
      // this.setMapData([{
      //     coord: [117.230263,36.062097],
      // },{
      //     coord: [119.163856,36.646063]
      // }])
    },
  },
  created() {
    this.openSocket();
    this.getRank();
    this.getData();
    clearTimer = setInterval(() => {
      this.clearFromData();
    }, 3000);
  },
  activated() {},
  mounted() {
    this.$nextTick(() => {
      this.initMap();
    });
  },
  destroyed() {
    socket.close();
    clearInterval(clearTimer);
  },
};
</script>
